<template>
    <div id="live-windows">
        <div class="connection-guidance" v-show="videourls.length <= 0">
            <p class="connection-guidance-title">无摄像头连接</p>
            <p class="connection-guidance-opt" @click="visible = true">
                点击查看摄像头连接指南
            </p>
        </div>
        <connection-guidance ref="connectionGuidance" v-show="visible" :visible.sync="visible"></connection-guidance>
        <el-row v-show="videourls.length > 0">
            <el-col :span="videourls.length <= 1 ? 24 : 12">
                <video
                    :class="
                        videourls.length <= 1
                            ? 'video-item video-one'
                            : 'video-item video-multi'
                    "
                    :poster="require('@/assets/video-background.jpg')"
                    id="videoElement0"
                    controls
                    autoplay
                    muted
                ></video>
            </el-col>
            <el-col :span="12" v-show="videourls.length >= 2">
                <video
                    class="video-item video-multi"
                    :poster="require('@/assets/video-background.jpg')"
                    id="videoElement1"
                    controls
                    autoplay
                    muted
                ></video>
            </el-col>
        </el-row>
        <el-row v-show="videourls.length > 2">
            <el-col :span="12">
                <video
                    class="video-item video-multi"
                    :poster="require('@/assets/video-background.jpg')"
                    id="videoElement2"
                    controls
                    autoplay
                    muted
                ></video>
            </el-col>
            <el-col :span="12">
                <video
                    class="video-item video-multi"
                    :poster="require('@/assets/video-background.jpg')"
                    id="videoElement3"
                    controls
                    autoplay
                    muted
                ></video>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import flvjs from "flv.js";
import ConnectionGuidance from "@/components/live/ConnectionGuidance"

export default {
    components: {
        ConnectionGuidance
    },
    data() {
        return {
            // videourls: ["http://1011.hlsplay.aodianyun.com/demo/game.flv", "http://img.ksbbs.com/asset/Mon_1704/15868902d399b87.flv"],
            videourls: [],
            videoPlayerList: [],
            visible: false,
        };
    },
    methods: {
        // 向后端请求播放地址
        getVideoUrls() {
            this.$axios
                .get("/api/video/play")
                .then((response) => {
                    console.log(response.data);
                    this.videourls = response.data.o;
                    this.setVideoListLength();
                    this.startPlay();
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        startPlay() {
            for (var i = 0; i < this.videourls.length; i++) {
                this.createFlvPlayer(i, this.videourls[i]);
            }
        },
        // 将Flv播放器绑定到videoElement元素上去，播放videoUrl
        createFlvPlayer(index, videoUrl) {
            if (flvjs.isSupported()) {
                var flvPlayer = flvjs.createPlayer({
                    type: "flv",
                    isLive: true,
                    hasVideo: true,
                    hasAudio: false,
                    enableWorker: true,
                    cors: true,
                    url: videoUrl,
                });
                this.videoPlayerList.push(flvPlayer);
                const videoPlayerElement = document.getElementById(
                    "videoElement" + index
                );
                flvPlayer.attachMediaElement(videoPlayerElement);
                flvPlayer.load();
                flvPlayer.play();
                flvPlayer.on(
                    flvjs.Events.ERROR,
                    (errorType, errorDetail, errorInfo) => {
                        console.log("视频断流...");
                        console.log(errorType);
                        console.log(errorDetail);
                        console.log(errorInfo);
                        if (flvPlayer) {
                            flvPlayer.pause();
                            flvPlayer.unload();
                            flvPlayer.detachMediaElement();
                            flvPlayer.destroy();
                            flvPlayer = null;
                        }
                    }
                );
            }
        },
        // 停止混流播放并移除直播流抓取
        pausemix() {
            for (var key in this.videoPlayerList) {
                var flvPlayer = this.videoPlayerList[key];
                if (flvPlayer != null) {
                    flvPlayer.pause();
                    flvPlayer.unload();
                    flvPlayer.detachMediaElement();
                    flvPlayer.destroy();
                    flvPlayer = null;
                }
            }
            this.videoPlayerList = [];
        },
        // 向父组件传参this.videourls.length，以动态改变布局
        setVideoListLength() {
            this.$emit("setVideoListLength", this.videourls.length);
        },
    },
    mounted() {
        this.getVideoUrls();
    },
    beforeDestroy() {
        this.pausemix();
    },
};
</script>

<style scoped>
.connection-guidance {
    width: 98.3%;
    margin-left: 10px;
    height: 665px;
    line-height: 525px;
    background-color: black;
    border: 2px solid #606266;
    
}
.connection-guidance-title {
    color: #909399;
    font-size: 25px;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 5px;
    text-indent: 5px;
    height: 25px;
}
.connection-guidance-opt {
    color: #606266;
    font-size: 14px;
    font-style: italic;
    letter-spacing: 5px;
    text-indent: 5px;
    height: 25px;
    cursor: pointer;
}
.connection-guidance-opt:hover {
    text-decoration: underline;
}

.el-row {
    margin-left: 5px;
    margin-right: 10px;
}
.video-item {
    width: 100%;
    object-fit: contain;
    background: black;
    border: 2px solid #606266;
}
.video-one {
    height: 665px;
}
.video-multi {
    height: 328px;
}
</style>